<template>
	<view class="container">
		<view class="content">
			<view class="infor-item border-bottom" @click="selectAvatar">
				<view class="title">头像</view>
				<image class="avatar" :src="logo" mode="aspectFill"></image>
			</view>
			<view class="infor-item border-bottom">
				<view class="title">用户昵称</view>
				<input type="text" v-model="nickName" />
			</view>
			<view class="infor-item border-bottom">
				<view class="title">手机号</view>
				<input type="number" v-model="mobile" />
			</view>
			<view class="infor-item border-bottom">
				<view class="title">出生日期</view>
				<picker mode="date" class="date-wrapper" :value="birthday" :end="endDate" @change="bindDateChange">
					<view class="text">
						<view class="date">{{birthday || ''}}</view>
						<image src="/static/next06.png" class="next"></image>
					</view>
				</picker>
			</view>
			<view class="infor-item">
				<view class="title">所在地区</view>
				<view class="date-wrapper" @click="togglePopup">
					<view class="text">
						<view class="date">{{region || ''}}</view>
						<image src="/static/next06.png" class="next"></image>
					</view>
				</view>
			</view>
			<region-picker :isPopupShow.sync="isPopupShow" :selectProvinceId.sync="selectProvinceId"
				:initFlag.sync="initFlag" :selectCityId.sync="selectCityId" :selectAreaId.sync="selectAreaId"
				:region.sync="region">
			</region-picker>
		</view>
		<view class="bottom-btn" @click="submit">保存</view>
	</view>
</template>

<script>
	import {
		updateMemberInfo
	} from '@/api/user.js'
	import {
		formatDate
	} from '@/utils/util.js'
	import upload from '@/mixins/upload.js'
	import regionPicker from '@/components/region-picker/index.vue'
	import {
		config
	} from '@/utils/config.js'
	export default {
		components: {
			regionPicker
		},
		mixins: [upload],
		data() {
			return {
				nickName: '',
				logo: '',
				initFlag: true,
				selectProvinceId: '',
				selectCityId: '',
				selectAreaId: '',
				region: '',
				birthday: '',
				mobile: '',
				isPopupShow: false,
				endDate: formatDate(new Date(), 'yyyy-MM-dd')
			}
		},
		computed: {
			memberInfo() {
				return this.$store.getters.userInfo
			}
		},
		onLoad() {},
		onShow() {
			this.nickName = this.memberInfo.nickName
			this.logo = this.memberInfo.logo
			const {
				provinceName,
				cityName,
				districtName,
				provinceId,
				cityId,
				districtId,
				birthday,
				mobile
			} = this.$store.getters.userInfo
			this.selectProvinceId = provinceId || null
			this.selectCityId = cityId || null
			this.selectAreaId = districtId || null
			this.birthday = birthday || null
			this.mobile = mobile || null
			if (districtId) {
				this.initFlag = true
				this.region = provinceName + '/' + cityName + '/' + districtName
			} else {
				this.initFlag = false
			}
		},
		methods: {
			selectAvatar() {
				this.handleUploadSingle()
			},
			submit() {
				const data = {
					birthday: this.birthday,
					provinceId: this.selectProvinceId,
					cityId: this.selectCityId,
					districtId: this.selectAreaId,
					mobile: this.mobile,
					nickName: this.nickName,
					logo: this.logo
				}
				updateMemberInfo(data).then(respanse => {
					uni.showToast({
						title: '修改成功！',
						icon: 'success',
						duration: 2000
					})
					// setTimeout(() => {
					// 	this.$store.dispatch('user/getUserInfo')
					// },2000)
				})
			},
			togglePopup() {
				if (this.initFlag) return
				this.isPopupShow = !this.isPopupShow
			},
			bindDateChange: function(e) {
				this.birthday = e.target.value
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		margin: 20rpx 25rpx 0;
		border-radius: 10rpx;
		overflow: hidden;
		background-color: #fff;

		.infor-item {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 30rpx;

			&::after {
				left: 30rpx;
				right: 30rpx;
			}

			.title {
				line-height: 116rpx;
				font-size: 28rpx;
				color: #333333;
			}

			.avatar {
				margin-right: 32rpx;
				width: 76rpx;
				height: 76rpx;
				background: #AAAAAA;
				border-radius: 50%;
			}

			input {
				flex: 1;
				display: block;
				padding-right: 32rpx;
				width: 100%;
				box-sizing: border-box;
				text-align: right;
				font-size: 28rpx;
				color: #333333;
			}

			.date-wrapper {
				flex: 1;

				.text {
					display: flex;
					align-items: center;
					width: 100%;
					height: 116rpx;

					.date {
						flex: 1;
						text-align: right;
						line-height: 116rpx;
						font-size: 28rpx;
						color: #333333;
					}

					.next {
						margin: 0 32rpx 0 10rpx;
						width: 16rpx;
						height: 28rpx;
					}
				}
			}
		}
	}

	.bottom-btn {
		position: fixed;
		left: 25rpx;
		right: 25rpx;
		bottom: 79rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 32rpx;
		color: #fff;
		background: linear-gradient(90deg, #EB7C3F, #EA5D2E);
		border-radius: 45rpx;
	}
</style>
